  <template>
    <span>{{sum}}</span> <br>
    <button @click="sum++">+1</button>
    <hr>
    <span>{{msg}}</span><br>
    <button @click="msg+='!'">改变消息</button>
    <hr>
    <p>姓名：{{person.name}}</p>
    <p>年龄：{{person.age}}</p>
    <p>薪资：{{person.job.j1.salary}}k</p>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">修改年龄++</button>
    <button @click="person.job.j1.salary++">涨薪</button>

  </template>
  
  <script>
  import {ref,reactive,watch,watchEffect} from 'vue'
  export default {
    name: 'App',
    setup(){
      let sum = ref(0);
      let msg = ref('你好')
      let person = reactive({
        name:'zhangsan',
        age:21,
        job:{
          j1:{
            salary:12
          }
        }
      })
      // 不用声明监视哪个数据，用到哪个数据就监视哪个。当数据发生改变时，重新执行该函数。默认开启立即监视
      watchEffect(()=>{
        let a = sum.value;
        let b = person.job.j1.salary;
        console.log('数据发生了改变！');
      })

      return {
        sum,
        msg,
        person
      }
    }
  }
  </script>
  
  <style>
  
  </style>
  